<template>
  <view>
    <view class="content">
<!--      <view class="card">
        <image src="/static/image/bg2.png" mode="widthFix" class="img"></image>
      </view> -->
      <image :src="poster" mode="widthFix" class="img"></image>
      <!-- <poster ref="poster" :list="list" :width="2250" :height="4872" @on-success="posterSuccess"
        @on-error="posterError"></poster> -->
        <poster ref="poster" :list="list" :width="750" :height="1750" @on-success="posterSuccess"
          @on-error="posterError"></poster>
      <view class="u-flex u-row-center">
        <view class="s-btn s-btn--primary s-size-default s-btn-top s-btn_border" @click="confirm">保存到相册</view>
      </view>
    </view>
    
  </view>
</template>

<script>
  import Poster from '../../../components/zhangyuhao-poster/Poster.vue'
  export default {
    components: {
      Poster
    },
    data() {
      return {
        poster: '',
        list: []
      }
    },
    onLoad(options) {
      uni.setNavigationBarTitle({
        title: options.Name
      });
      this.start()
    },
    methods: {
      posterError(err) {
        console.log(err)
      },
      posterSuccess(url) {
        // 生成成功，会把临时路径在这里返回
        this.poster = url;
        // console.log(url)
      },
      start() {
        // 赋值需要渲染的信息
        this.list = [{
            type: 'image',
            // path替换成你自己的图片，注意需要在小程序开发设置中配置域名
            path: 'https://pic1.zhimg.com/v2-fa02feab8cf77139ceb78ad8ae45c5fe_r.jpg',
            x: 0,
            y: 0,
            text: '童装卫衣2023春季新款',
            width: 750,
            height: 1750
          },{
            type: 'image',
            // path替换成你自己的图片，注意需要在小程序开发设置中配置域名
            path: 'https://pic3.zhimg.com/v2-b13f1bfe0418ab8406a95d54472951e2_b.jpg',
            x: 100,
            y: 300,
            text: '',
            width: 150,
            height: 150
          },{
            type: 'text',
            x: 100,
            y: 500,
            text: '诚邀',
            size: 36,
            color: '#000000',
            bold:'normal bold 36px Arial,sans-serif'
          },{
            type: 'text',
            x: 200,
            y: 500,
            text: '群昵称',
            size: 36,
            color: '#333333'
          },{
            type: 'text',
            x: 100,
            y: 560,
            text: '拨冗出席',
            size: 36,
            color: '#000000'
          },{
            type: 'text',
            x: 100,
            y: 650,
            text: '时间/TIME',
            size: 36,
            color: '#000000'
          },{
            type: 'text',
            x: 100,
            y: 700,
            text: '2023年07月20日 15:30',
            size: 36,
            color: '#333333'
          },{
            type: 'text',
            x: 100,
            y: 755,
            text: '/',
            size: 36,
            color: '#333333'
          },{
            type: 'text',
            x: 100,
            y: 810,
            text: '地点/PLACE',
            size: 36,
            color: '#000000'
          },{
            type: 'text',
            x: 100,
            y: 860,
            text: '国际大酒店水晶厅',
            size: 36,
            color: '#333333'
          }
          
        ];
        // 生成图片
        this.$nextTick(() => {
          // 要放在$nextTick()里，不然会空白
          this.$refs.poster.create();
        })
      },
      //保存到相册
      confirm() {
        // #ifdef MP-WEIXIN
        uni.downloadFile({
          url: this.poster,
          success: res => {
            if (res.statusCode === 200) {
              uni.saveImageToPhotosAlbum({
                filePath: res.tempFilePath,
                success: function() {
                  uni.showToast({
                    title: '保存成功',
                    duration: 2000
                  })

                },
                fail: function() {
                  uni.showToast({
                    title: '保存失败',
                    duration: 2000
                  })

                }
              })
            } else {
              uni.showToast({
                title: '保存失败',
                duration: 2000
              })
            }
          }
        })
        // #endif
      },
    }
  }
</script>

<style lang="scss" scoped>
  .img {
    width: 100%;
    height: 100%;
  }

  .content {
    display: flex;
    flex-direction: column;
    padding: 32rpx;

    .card {
      margin-bottom: 100rpx;
    }
  }

  .s-btn_border {
    width: 400rpx;
    border-radius: 60rpx;
  }
</style>